<template>
    <view class="detail">
        <view class="detail_title">商品详情</view>
        <view>
            <rich-text type="text" :nodes="getRichText"></rich-text>
        </view>
    </view>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
    state: {
        type: Object,
        default: () => ({})
    }
});
const getRichText = computed(() => {
    return props.state.goodsDescription
        ?.replace(/<img/gi, '<img style="width:100%;max-width:100%;height:auto"')
        ?.replace(/<p/gi, '<p style="display: flex;flex-direction: column"');
});
</script>

<style lang="scss" scoped>
.detail {
    margin-top: 18rpx;
    padding-bottom: 180rpx;
    background-color: #ffffff;
    .detail_title {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 29rpx 0;
        font-size: 29rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        &::before {
            content: '';
            display: block;
            width: 179rpx;
            height: 2rpx;
            margin-right: 29rpx;
            background: #f2f2f2;
        }
        &::after {
            content: '';
            display: block;
            width: 179rpx;
            height: 2rpx;
            margin-left: 29rpx;
            background: #f2f2f2;
        }
    }
}
</style>
